<template>
  <div>
    <ul v-if="orderList.length">
      <li v-for="(item,index) of orderList" :key="index" @click="click(item)">
        <img :src="item.pro_pic" alt="">
        <div class="content">
          <p>{{item.pro_introduce}}</p>
          <p>
            <span>{{item.clinic_serviceName}}</span>
            <span>{{item.distance}}km</span>
          </p>
          <p class="p-flex">
            <b>￥{{item.pro_price}}</b>
            <i>{{item.status==='0'?'未付款':'已付款'}}</i>
          </p>
        </div>
      </li>
    </ul>
    <div v-else class="noData">
      <img src="./../assets/liwudi.png" alt="">
      <span>您还没有订单，快去购买吧</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    orderList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  mounted () {
  },
  methods: {
    click (item) {
      // this.$router.push('/orderDetail?order_id=' + item.order_id)
      this.$router.push({ path: '/orderDetail', query: { order_id: item.order_id } })
    }
  }
}
</script>

<style lang="scss" scoped>
.noData {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
  flex-direction: column;
  img {
    height: 1rem;
    width: 1rem;
  }
}
ul {
  list-style: none;
  li {
    display: flex;
    height: 1.13rem;
    width: 100%;
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #efefef;
    /* border-radius: 0.04rem; */
    /* &+li{
      margin-top: 0.1rem;
    } */
    img {
      height: 0.8rem;
      width: 0.8rem;
      margin-left: 0.255rem;
    }
    .content {
      width: 100%;
      margin-left: 0.095rem;
      margin-right: 0.25rem;
      p:nth-of-type(1) {
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-weight: bold;
      }
      p:nth-of-type(2) {
        height: 0.2rem;
        width: 100%;
        margin-top: 0.05rem;
        span:nth-of-type(1) {
          float: left;
          line-height: 0.2rem;
          margin-right: 0.1rem;
          max-width: 1.6rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        span:nth-of-type(2) {
          float: left;
          line-height: 0.2rem;
        }
      }
      .p-flex{
        display: flex;
        justify-content: space-between;
        margin-top: 0.07rem;
        b{
          line-height: 0.26rem;
          font-weight:bold;
          color:rgba(255,89,89,1);
          font-size: 0.18rem;
        }
        i{
          line-height: 0.26rem;
          font-weight:400;
          color:rgba(102,102,102,1);
          font-size:0.13rem;
        }
      }
    }
  }
}
</style>
